<template>
    <div class="contarner-page" @click.stop="showLanguageHandel">
        <div class="page_content ">
            <div class="home_content">
                <page-header index="'0'" @fetchMediaList="fetchMediaList" @goAdmin="goAdmin"
                    @showDialogVisible="showDialogVisible" @logOut="logOut" ref="languageRef"></page-header>
                <!-- 搜索 -->
                <div class="container">
                    <div class=" " :class="Reverse ? 'Reverse' : ''">
                        <!-- 规格 -->
                        <div class="search_box">
                            <div class="item flex_">
                                <div class="flex_">
                                    <div class="tag_title">
                                        Type
                                    </div>
                                    <img src="@/assets/arrow.webp" class="img" alt="">
                                </div>
                                <div class="content">
                                    <div class="tag_all shou" :class="type == null ? 'change' : ''"
                                        @click="changeTypeAll">
                                        All
                                    </div>
                                    <div class="tag shou" :class="type == k ? 'change' : ''"
                                        @click="changeType(item, k)" :key="k" v-for="(item, k) in  typeList">
                                        {{ item.type }}
                                    </div>
                                </div>
                            </div>
                            <div class="item flex_">
                                <div class="flex_">
                                    <div class="tag_title">Country</div>
                                    <img src="@/assets/arrow.webp" class="img" alt="">
                                </div>
                                <div class="content">
                                    <div class="tag_all shou" :class="city == null ? 'change' : ''"
                                        @click="changeCityAll">
                                        All
                                    </div>
                                    <div class="tag shou" :class="city == k ? 'change' : ''"
                                        @click="changeCity(item, k)" :key="k" v-for="(item, k) in cityList">
                                        {{ item.city }}
                                    </div>
                                </div>

                            </div>
                            <div class="item flex_">
                                <div class="flex_">
                                    <div class="tag_title">Sort</div>
                                    <img src="@/assets/arrow.webp" class="img" alt="">
                                </div>
                                <div class="content">
                                    <div class="tag shou" :class="sort == k ? 'change' : ''"
                                        @click="changeSort(item, k)" :key="k" v-for="(item, k) in sortList">
                                        {{ item.sort }}
                                    </div>
                                </div>

                            </div>
                        </div>


                        <!-- 排序 -->
                        <!-- <div class="item flex_">
                        <div class="tag_title">排序</div>
                        <div class="tag_all shou" :class="sort == null ? 'change' : ''" @click="changeSortAll">默认</div>
                        <div class="tag shou" :class="sort == k ? 'change' : ''" @click="changeSort(item, k)" :key="k"
                            v-for="(item, k) in sortList">
                            {{ item }}
                        </div>
                    </div> -->
                    </div>
                    <el-tag closable class="el-tag " v-if="nickname" @close="closeTag">
                        by:{{ nickname }}
                    </el-tag>
                    <div class="success-box">
                        <div class="success-list flex_">
                            <div class="item shou" :key="k" v-for="(item, k) in list" @click="showMedia(item)">
                                <div class="download-content">
                                    <div class="media-box">
                                        <img :src="item.media_cover" class="img" alt="Preview" loading="lazy" />
                                        <div :class="Reverse ? 'Reverse' : ''">
                                            <div class="posi f-16">{{ item.media_name }}
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pagination flex_center" v-if="total > 0">
                        <div class="fr page ">
                            <div class="sui-pagination clearfix ">
                                <ul class="flex_" style="">
                                    <li class="prev" :class="{ disabled: pageNo === 1 }"
                                        @click="pageNo > 1 ? getPageNo(pageNo - 1) : null">
                                        <div class="left-active shou"></div>
                                        <div class="left-disabled shou"></div>
                                    </li>
                                    <li v-show="startNumAndEndNum.start > 1" :class="{ active: pageNo === 1 }"
                                        @click="getPageNo(1)">
                                        <a>1</a>
                                    </li>
                                    <li class="dotted" v-show="startNumAndEndNum.start > 2">
                                        <span>...</span>
                                    </li>

                                    <!-- 中间部分 -->
                                    <li v-for="(page, index) in pagesArr" :key="index"
                                        :class="{ active: pageNo === page }" @click="getPageNo(page)">
                                        <a>{{ page }}</a>
                                    </li>

                                    <li class="dotted" v-show="startNumAndEndNum.end < totalPage - 1">
                                        <span>...</span>
                                    </li>
                                    <li v-show="startNumAndEndNum.end < totalPage"
                                        :class="{ active: pageNo === totalPage }" @click="getPageNo(totalPage)">
                                        <a>{{ totalPage }}</a>
                                    </li>
                                    <li class="next" :class="{ disabled: pageNo === totalPage }"
                                        @click="pageNo < totalPage ? getPageNo(pageNo + 1) : null">
                                        <div class="right-active shou"></div>
                                        <div class="right-disabled shou"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog custom-class="porter-dialog porter-dialogLogin" :title="currentForm"
                :visible.sync="dialogVisible" :width="dialogWidth1" :before-close="handleClose"
                :class="Reverse ? 'Reverse' : ''" :show-close="!Reverse">
                <!-- 登录表单 -->
                <el-form v-if="currentForm === 'login'" :model="loginForm" ref="loginForm" :rules="loginRules">
                    <el-form-item :label="$t('home.email')" prop="email">
                        <el-input v-model="loginForm.email"></el-input>
                    </el-form-item>
                    <div v-if="loginMethod === 'password'">
                        <el-form-item :label="$t('home.password')" prop="password">
                            <el-input type="password" v-model="loginForm.password"></el-input>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item :label="$t('home.code')" prop="verificationCode">
                            <el-input v-model="loginForm.verificationCode"></el-input>
                            <el-button type="text"
                                @click="sendVerificationCode('login')">{{ $t('home.sendcode') }}</el-button>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button type="primary" class="button-porter"
                            @click="login">{{ $t('home.Login') }}</el-button>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;">
                        <el-button type="text" @click="toggleLoginMethod">
                            {{ loginMethod === 'password' ?
        $t('home.Verificationcodelogin') : $t('home.Passwordlogin') }}
                        </el-button>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;" class="loginbtns">
                        <el-button type="text" class="button-text"
                            @click="switchForm('register')">{{ $t('home.NoaccountClicktoregister') }}</el-button>
                        <el-button class="button-text" type="text"
                            @click="switchForm('forgotPassword')">{{ $t('home.forgetthepassword') }}</el-button>
                    </el-form-item>
                </el-form>

                <!-- 注册表单 -->
                <el-form v-if="currentForm === 'register'" :model="registerForm" ref="registerForm"
                    :rules="registerRules">
                    <el-form-item :label="$t('home.email')" prop="email">
                        <el-input v-model="registerForm.email"></el-input>
                        <el-button type="text" @click="sendVerificationCode('register')">send code</el-button>
                    </el-form-item>
                    <el-form-item :label="$t('home.code')" prop="verificationCode">
                        <el-input v-model="registerForm.verificationCode"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('home.password')" prop="password">
                        <el-input type="password" v-model="registerForm.password"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('home.nickname')" prop="nickname">
                        <el-input type="nickname" v-model="registerForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="button-porter"
                            @click="register">{{ $t('home.Registerandlogin') }}</el-button>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;">
                        <el-button type="text" @click="switchForm('login')">{{ $t('home.Gotologin') }}</el-button>
                    </el-form-item>
                </el-form>

                <!-- 忘记密码表单 -->
                <el-form v-if="currentForm === 'forgotPassword'" :model="forgotPasswordForm" ref="forgotPasswordForm"
                    :rules="forgotPasswordRules">
                    <el-form-item :label="$t('home.email')" prop="email">
                        <el-input v-model="forgotPasswordForm.email"></el-input>
                        <el-button type="text" @click="sendVerificationCode('forgotPassword')">send code</el-button>
                    </el-form-item>
                    <el-form-item :label="$t('home.code')" prop="verificationCode">
                        <el-input v-model="forgotPasswordForm.verificationCode"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('home.newPassword')" prop="newPassword">
                        <el-input type="password" v-model="forgotPasswordForm.newPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="button-porter"
                            @click="resetPassword">{{ $t('home.ResetPassword') }}</el-button>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0;">
                        <el-button type="text" @click="switchForm('login')">{{ $t('home.Gotologin') }}</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog custom-class="porter-dialog" :visible.sync="dialogVisible1" :width="dialogWidth"
                :class="Reverse ? 'Reverse' : ''">
                <div class="dialog-box flex_">
                    <div class="media_img">
                        <img :src="form.media_cover" class="img" alt="Preview" />
                    </div>
                    <div class="info flex_column">
                        <div class="row">
                            <div class="col">{{ $t('home.ResourceName') }}: {{ form.media_name }}</div>
                            <div class="col">{{ $t('home.Views') }}: {{ form.play_totals }}</div>
                            <div class="col flex_">{{ $t('home.Postedby') }}: <el-link type="primary"
                                    @click="clickNickname"><span class="color">{{ form.nickname }}</span></el-link>
                            </div>
                            <div class="col">{{ $t('home.Releasetime') }}: {{ form.create_date }}</div>
                        </div>
                        <div class="flex_ btns PCSHOW">
                            <el-button type="warning" class="button-porter1"
                                @click="copy">{{ $t('home.copyLink') }}</el-button>
                            <el-button type="success" class="button-porter-play" @click="goApp">
                                {{ $t('home.PlayNow') }}
                            </el-button>
                        </div>
                    </div>
                </div>
                <el-button type="warning" class="button-porter1 APPSHOW app-button-porter"
                    @click="copy">{{ $t('home.copyLink') }}</el-button>
                <el-button type="success" class="button-porter-play APPSHOW app-porter-play" @click="goApp">
                    {{ $t('home.PlayNow') }}
                </el-button>
            </el-dialog>
        </div>
        <footer :class="Reverse ? 'Reverse' : ''">
            <div class="container">
                <div class="footer-content">
                    <div class="footer-link">
                        <div class="row flex_between">

                            <div class="col-12 shou">
                                <div class="link-label fw700 f-16">Dowanload</div>
                                <ul class="list-unstyled c-ccc f-16">
                                    <div class="imgbox PCSHOW">
                                        <img src="@/assets/googlePlay.webp" class="img" alt="">
                                    </div>
                                    <div class="imgbox PCSHOW">
                                        <img src="@/assets/Apk.webp" class="img" alt="">
                                    </div>
                                    <div class="imgbox APPSHOW">
                                        <img src="@/assets/googlePlay1.webp" class="img" alt="">
                                    </div>
                                    <div class="imgbox APPSHOW">
                                        <img src="@/assets/Apk1.webp" class="img" alt="">
                                    </div>
                                </ul>
                            </div>
                            <div class="col-6 ">
                                <div class="link-label fw700 f-16">{{ $t('home.Help') }}</div>
                                <ul class="list-unstyled c-ccc f-14">
                                    <li>
                                        <router-link to="/TermsofService">{{ $t('home.HelpCentre') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/TermsofService">{{ $t('home.Contactus') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.VulnerabilityRewardProgramme') }}</router-link>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-6 ">
                                <div class="link-label fw700   f-16">{{ $t('home.Legal') }}</div>
                                <ul class="list-unstyled c-ccc f-14">
                                    <li>
                                        <router-link to="/TermsofService">{{ $t('home.TermsofService') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.AdditionalVPNTermsofService') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.PrivacyandDataPolicy') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.Copyrightnoticesubmission') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.TakedownGuidancePolicy') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.Copyrightdispute') }}</router-link>
                                    </li>
                                </ul>
                            </div>
                            <!-- <div class="col-6 disabled">
                                <div class="link-label fw700 c-000 f-21" style="color: transparent;">Legal</div>

                                <ul class="list-unstyled c-ccc f-16">
                                    <li>
                                        <a>
                                            {{ $t('home.TakedownGuidancePolicy') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a> {{ $t('home.Copyrightdispute') }} </a>
                                    </li>
                                </ul>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

</template>
<script>
import axios from 'axios'
import {
    mapState,
    mapGetters,
    mapMutations
} from "vuex";
import pageHeader from "@/components/page-header.vue";

export default {
    name: 'Home',
    components: {
        pageHeader
    },

    data() {
        return {
            type: null,
            city: null,
            sort: 0,
            typeId: '',
            cityId: '',
            typeList: [],
            cityList: [],
            sortList: [
                {
                    sort: 'Time Sort'
                },
                {
                    sort: 'Popularity Sort'
                },
            ],
            spec: null,
            comp: null,
            pageNo: 1,
            pageSize: 20,
            total: 0,
            continues: 4,
            nickname: '',
            byid: '',
            link: '',
            form: {},
            isLoggedIn: false,
            dialogVisible1: false,
            dialogVisible: false,
            dialogWidth: '540px', // 默认宽度为30%
            dialogWidth1: '400px', // 默认宽度为30%
            input: '',
            throttleTimeout: null,
            list: [

            ],
            currentForm: 'login',
            loginMethod: 'password',
            loginForm: {
                email: '',
                password: '',
                verificationCode: ''
            },
            registerForm: {
                email: '',
                verificationCode: '',
                password: ''
            },
            forgotPasswordForm: {
                email: '',
                verificationCode: '',
                newPassword: ''
            },

        }
    },
    computed: {
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
        // 连续页码起始数字与结束数字
        startNumAndEndNum() {
            const {
                pageNo,
                continues,
                totalPage
            } = this;
            let start = 0;
            let end = 0;
            // 如果总页数少于连续页数
            if (totalPage < continues) {
                start = 1;
                end = totalPage;
            } else {
                start = pageNo - Math.floor(continues / 2);
                end = pageNo + Math.floor(continues / 2);
                // start出现0/负数
                if (start < 1) {
                    start = 1;
                    end = continues;
                }
                // end大于总页数
                if (end > totalPage) {
                    start = totalPage - continues + 1;
                    end = totalPage;
                }
            }
            return {
                start,
                end
            };
        },
        pagesArr() {
            let arr = [];
            // 连续页码个数
            arr.length =
                this.totalPage < this.continues ? this.totalPage : this.continues;
            // 第一个连续页码
            let pageNum = this.startNumAndEndNum.start;
            for (let i = 0; i < arr.length; i++) {
                arr[i] = pageNum;
                pageNum++;
            }
            return arr;
        },
        ...mapGetters([
            "uid",
            "token",
            "loginState",
            "email",
            "Reverse",
        ]),
        loginRules() {
            return {
                email: [{
                    required: true,
                    message: this.$t('home.Pleaseenteryouremailaddress'),
                    trigger: 'blur'
                },
                {
                    type: 'email',
                    message: this.$t('home.Pleaseenteravalidemailaddress'),
                    trigger: ['blur', 'change']
                }
                ],
                password: [{
                    required: true,
                    message: this.$t('home.Pleaseenteryourpassword'),
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: this.$t('home.Thepasswordmustbeatleastsixcharacters'),
                    trigger: ['blur', 'change']
                }
                ],
                verificationCode: [{
                    required: true,
                    message: this.$t('home.Pleaseentertheverificationcode'),
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: this.$t('home.Theverificationcodemustbeatleastsixdigits'),
                    trigger: ['blur', 'change']
                }
                ]
            };
        },
        registerRules() {
            return {
                email: [{
                    required: true,
                    message: this.$t('home.Pleaseenteryouremailaddress'),
                    trigger: 'blur'
                },
                {
                    type: 'email',
                    message: this.$t('home.Pleaseenteravalidemailaddress'),
                    trigger: ['blur', 'change']
                }
                ],
                verificationCode: [{
                    required: true,
                    message: this.$t('home.Pleaseentertheverificationcode'),
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: this.$t('home.Theverificationcodemustbeatleastsixdigits'),
                    trigger: ['blur', 'change']
                }
                ],
                password: [{
                    required: true,
                    message: this.$t('home.Pleaseenteryourpassword'),
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: this.$t('home.Thepasswordmustbeatleastsixcharacters'),
                    trigger: ['blur', 'change']
                }
                ],
                nickname: [{
                    required: true,
                    message: this.$t('home.Pleaseenteryournickname'),
                    trigger: 'blur'
                }],
            };
        },
        forgotPasswordRules() {
            return {
                email: [{
                    required: true,
                    message: this.$t('home.Pleaseenteryouremailaddress'),
                    trigger: 'blur'
                },
                {
                    type: 'email',
                    message: this.$t('home.Pleaseenteravalidemailaddress'),
                    trigger: ['blur', 'change']
                }
                ],
                verificationCode: [{
                    required: true,
                    message: this.$t('home.Pleaseentertheverificationcode'),
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: this.$t('home.Theverificationcodemustbeatleastsixdigits'),
                    trigger: ['blur', 'change']
                }
                ],
                newPassword: [{
                    required: true,
                    message: this.$t('home.Pleaseenternewpassword'),
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: this.$t('home.Theverificationcodemustbeatleastsixdigits'),
                    trigger: ['blur', 'change']
                }
                ]
            };
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateDialogWidth);
    },
    mounted() {
        this.fetchMediaList()
        this.updateDialogWidth();
        window.addEventListener('resize', this.updateDialogWidth);
        this.getCityList()
        this.getTypeList()
    },
    methods: {
        async changeCity(item, k) {
            this.pageNo = 1
            this.cityId = item.id
            this.city = k
            this.fetchMediaList()
        },
        changeType(item, k) {
            this.pageNo = 1

            this.typeId = item.id
            this.type = k
            this.fetchMediaList()
        },
        changeSort(item, k) {
            this.pageNo = 1

            this.sort = k
            this.fetchMediaList()

        },
        changeCityAll(item, k) {
            this.pageNo = 1

            this.city = null
            this.cityId = null
            this.fetchMediaList()

        },
        changeTypeAll(item, k) {
            this.pageNo = 1

            this.type = null
            this.typeId = null
            this.fetchMediaList()

        },
        async getTypeList() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaType')
            this.typeList = res.data
        },
        async getCityList() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaCity')
            this.cityList = res.data
        },
        clickNickname() {
            this.nickname = this.form.nickname
            this.byid = this.form.uid
            this.pageNo = 1
            this.fetchMediaList();
            setTimeout(() => {
                this.scrollToTop();
            }, 200)
            this.dialogVisible1 = false
        },
        showLanguageHandel() {
            this.$refs.languageRef.close();
        },
        showDialogVisible() {
            this.dialogVisible = true
        },
        goApp() {
            var url = new URL(this.link);
            var params = new URLSearchParams(url.search);
            var deepLinkUrl = "iptvdeeplink://?" + params.toString();

            // 创建一个a标签并尝试通过点击跳转到应用
            var a = document.createElement('a');
            a.href = deepLinkUrl;
            a.style.display = 'none';
            document.body.appendChild(a);

            // 尝试点击a标签来打开应用
            a.click();

            // 设置一个计时器，在2秒后重定向到应用商店（假定跳转失败的情况）
            setTimeout(function () {
                window.location = "https://www.pgyer.com/7mCZCK7A";
            }, 2000);
        },
        copy() {
            this.$copyText(this.link).then(
                (e) => {
                    this.$message({
                        message: 'success',
                        type: 'success',
                        customClass: 'my-custom-message'
                    })
                    console.log(e);
                },
                (err) => {
                    console.log(err);
                }
            );

        },
        async showMedia(item) {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaLink', {
                id: item.id
            })
            if (res.data.length > 0) {
                this.form = Object.assign({}, item);
                this.link = res.data[0].link_url
                this.dialogVisible1 = true

            } else {
                this.$message.error('Invalid resource!')
            }

        },
        updateDialogWidth() {
            this.dialogWidth = window.innerWidth < 600 ? '86%' : '540px';
            this.dialogWidth1 = window.innerWidth < 600 ? '86%' : '400px';
        },
        getPageNo(newPageNo) {
            this.pageNo = newPageNo;
            this.fetchMediaList(this.input);
            setTimeout(() => {
                this.scrollToTop();
            }, 200)
        },
        scrollToTop() {
            const scrollDuration = 500; // 动画持续时间，单位为毫秒
            const start = window.pageYOffset;
            const startTime = performance.now();

            const scroll = (timestamp) => {
                const currentTime = timestamp - startTime;
                const progress = Math.min(currentTime / scrollDuration, 1);
                const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;

                window.scrollTo(0, start * (1 - easeInOutCubic(progress)));

                if (progress < 1) {
                    window.requestAnimationFrame(scroll);
                }
            };

            window.requestAnimationFrame(scroll);
        },
        search() {
            this.fetchMediaList();
        },
        async fetchMediaList(input) {
            this.input = input
            let query = {
                media_name: input,
                status: 0,
                page: this.pageNo,
                size: this.pageSize,
                type_id: this.typeId,
                country_id: this.cityId,
                sort: this.sort
            }
            if (this.byid) {
                query = {
                    media_name: input,
                    status: 0,
                    uid: this.byid,
                    page: this.pageNo,
                    size: this.pageSize,
                    type_id: this.typeId,
                    country_id: this.cityId,
                    sort: this.sort
                }
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaListAll', query)
            this.list = []
            this.total = res.total
            this.list = res.data
        },
        handleInput() {
            // 清除之前的节流定时器
            if (this.throttleTimeout) {
                clearTimeout(this.throttleTimeout);
            }
            // 设置新的节流定时器
            this.throttleTimeout = setTimeout(() => {
                this.search();
            }, 500); // 500 毫秒延迟，可以根据需要调整
        },
        async init() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaListAll')
            this.list = res.data
        },
        ...mapMutations([
            "setUid",
            "setToken",
            "setEmail",
        ]),
        goAdmin() {
            if (!this.uid) {
                this.dialogVisible = true
            } else {
                this.$router.push('/porter')
            }
        },
        logOut() {
            this.$confirm(this.$t('home.Confirmtoexit'), this.$t('home.LogoutConfirmation'), {
                confirmButtonText: this.$t('home.Confirm'),
                cancelButtonText: this.$t('home.Cancel'),
                type: 'warning',
                customClass: 'my-custom-confirm',
                cancelButtonClass: 'cancelButtonClass',
                confirmButtonClass: 'confirmButtonClass',
            })
                .then(_ => {
                    localStorage.clear();
                    this.setUid('');
                    this.setToken('');
                    this.setEmail('');
                    this.clearForms();

                    done();
                })
                .catch(_ => { });
        },
        go() {
            this.$router.push('/porter');
        },
        handleClose(done) {
            done();
            this.clearForms();

        },
        toggleLoginMethod() {
            this.clearForms();
            this.loginMethod = this.loginMethod === 'password' ? 'verificationCode' : 'password';
        },
        switchForm(form) {
            this.clearForms();
            this.currentForm = form;
        },
        async sendVerificationCode(type) {
            let email = '';
            if (type === 'register') {
                email = this.registerForm.email;
            } else if (type === 'login') {
                email = this.loginForm.email;
            } else if (type === 'forgotPassword') {
                email = this.forgotPasswordForm.email;
            }

            // 邮箱校验
            if (!email) {
                this.$message.error('Please enter your email address');
                return;
            }
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailPattern.test(email)) {
                this.$message.error('Please enter a valid email address');
                return;
            }
            this.$message.success('Verification code sent!')
            if (type === 'register') {
                const {
                    data: res
                } = await axios.post('https://chatai-pro.wecall.info/api/sendCode', {
                    email: email
                })
                if (res.code == 0) {
                    this.$message.success('Verification code sent successfully!')
                }
            }
            console.log(`发送验证码到: ${email}`);
        },
        clearForms() {
            this.loginForm = {
                email: '',
                password: '',
                verificationCode: ''
            };
            this.registerForm = {
                email: '',
                verificationCode: '',
                password: '',
                nickname: ''
            };
            this.forgotPasswordForm = {
                email: '',
                verificationCode: '',
                newPassword: ''
            };
        },
        register() {
            this.$refs.registerForm.validate(async valid => {
                if (valid) {
                    const {
                        data: res
                    } = await axios.post('https://chatai-pro.wecall.info/api/register', this.registerForm)
                    if (res.code == 0) {
                        this.$message.success('success')
                        const {
                            data: res1
                        } = await axios.post('https://chatai-pro.wecall.info/api/login', this.registerForm)
                        if (res1.code == 0) {
                            this.dialogVisible = false
                            this.setUid(res1.uid)
                            this.setToken(res1.token)
                            this.setEmail(res1.email)

                        }
                    } else {
                        this.$message.error(res.msg)
                    }
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        login() {
            this.$refs.loginForm.validate(async valid => {
                if (valid) {
                    if (this.loginMethod === 'password') {
                        console.log('密码登录信息: ', this.loginForm);
                        const {
                            data: res
                        } = await axios.post('https://chatai-pro.wecall.info/api/login', this.loginForm)
                        if (res.code == 0) {
                            this.dialogVisible = false
                            this.setUid(res.uid)
                            this.setToken(res.token)
                            this.setEmail(res.email)

                            this.$message.success('success')

                        } else {
                            this.$message.error(res.msg)

                        }
                    } else {
                        console.log('验证码登录信息: ', this.loginForm);
                        const {
                            data: res
                        } = await axios.post('https://chatai-pro.wecall.info/api/loginByCode', this
                            .loginForm)
                        if (res.code == 0) {
                            this.dialogVisible = false
                            this.setUid(res.uid)
                            this.setToken(res.token)
                            this.$message.success('success')

                        } else {
                            this.$message.error(res.msg)

                        }
                    }
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        resetPassword() {
            this.$refs.forgotPasswordForm.validate(async valid => {
                if (valid) {
                    console.log('重置密码信息: ', this.forgotPasswordForm);
                    const {
                        data: res
                    } = await axios.post('https://chatai-pro.wecall.info/api/editUserInfo', this
                        .forgotPasswordForm)
                    if (res.code == 0) {
                        this.clearForms()
                        this.switchForm('login')
                        this.$message.success('success')
                    } else {
                        this.$message.error(res.msg)

                    }
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        closeTag() {
            this.nickname = ''
            this.byid = ''
            this.fetchMediaList(this.input);

        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-tag {
    margin-left: 8px;
    border: 0;
    background-color: #344264;
    font-size: 16px;
    line-height: 33px;
}

.search_box {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    /* This allows items to wrap to the next line */

    .item {
        display: flex;
        /* Aligns children horizontally */
        align-items: flex-start;
        /* Wraps children within the .item if necessary */
        margin-right: 20px;
        /* Add gap between items */

        .tag_title {
            color: #eee;
            font-family: Arial-Bold;
            /* font-weight: bold; */
            font-size: 18px;
            width: 88px;
            text-align: right;
            padding: 6px;
            margin-right: 0;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
        }

        .tag_all,
        .tag {
            height: 30px;
            border-radius: 5px;
            margin-right: 14px;
            line-height: 30px;
            padding: 0 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #7F90BC;
            font-size: 15px;
            margin-bottom: 16px;
        }

        .img {
            width: 12px;
            height: 12px;
            margin-right: 10px;
        }

        .change {
            color: #fff;
            background: #407DFF;
            border: 0;
        }
    }
}


::v-deep .my-custom-message {
    background-color: red !important;
    /* 自定义背景色 */
    color: white;
    /* 如果需要也可以更换文字颜色 */
}

::v-deep .el-dialog__title {
    color: #eee;
    font-size: 20px;
}

::v-deep .el-input__inner {
    background-color: transparent;
    border-color: #4089F7;
    color: #eee;
}



::v-deep .el-form-item__label {
    color: #eee;
    font-size: 16px;
}

::v-deep .porter-dialog {
    background-color: #222C44;
    border: 2px solid #344264;
    border-radius: 16px;

}

::v-deep .button-porter1 {
    background: #344264;
    border: 0;
}

::v-deep.button-porter-play {
    border: 0;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .button-porter {
    width: 100%;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .button-text {
    font-size: 14px;
}



.el-tag {
    margin-top: 20px;
    font-size: 16px;
}

.dialog-footer {
    text-align: right;
}

.page_content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .home_content {

        width: 100%;

        .logo {
            margin-right: 30px;
        }

        .login {
            margin-left: 30px;
        }
    }
}

.page_top {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.success-box {
    padding: 0px 0;
    padding-bottom: 100px;

    .success-list {
        flex-wrap: wrap;

        .item {
            flex: 0 0 auto;
            width: 25%;
            padding: 10px;
            padding-top: 20px;
            padding-bottom: 0;
            border-radius: 8px;
            overflow: hidden;

            .download-content {
                border-radius: 6px;
                min-height: inherit;
                position: relative;

                .posi {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 52px;
                    line-height: 52px;
                    padding-left: 14px;
                    background: linear-gradient(270deg, rgba(1, 194, 255, 0.9) 0%, rgba(7, 76, 255, 0.9) 100%);
                    border-radius: 0px 0px 8px 8px;
                    color: #fff;
                }



                .media-box {
                    position: relative;
                    width: 100%;
                    // padding-top: 100%;
                    height: 300px;

                    .img {
                        max-width: 100%;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        -o-object-fit: cover;
                        object-fit: cover;
                        border-radius: 10px;
                    }

                    .download-bottom {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: center;
                        padding: 18px 10px 10px 10px;
                        gap: 4px;

                        a {
                            width: 100%;
                            height: 100%;
                        }

                        .button {
                            background-color: #433aff;
                            border-radius: 6px;
                            color: #fff;
                            width: 100%;
                            padding: 11px;
                            font-size: 16px;
                            font-weight: 700;

                            .downloadImg {
                                margin-right: 10px;
                                width: 22px;
                                height: 22px;
                                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                            }
                        }
                    }
                }
            }
        }
    }
}

footer {
    background-color: #01020F;

    .imgbox {
        margin-bottom: 8px;

        .img {
            width: 170px;
            height: 36px;
        }
    }

    .footer-content {
        padding: 50px 0 30px;

        .row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;

            .link-label {
                color: #eee;
            }

            .col-12 {
                flex: 0 0 auto;
                width: 33.33333333%;
            }

            .col-6 {
                flex: 0 0 auto;
                width: 33.33333333%;
            }

            .list-unstyled {
                margin-top: 20px;
                list-style: none;
                color: #8C8D9B;

                li {
                    margin-bottom: 20px;
                }

                li:hover {
                    color: #fff;
                }
            }
        }

        .copyright {
            margin-top: 40px;

            div {
                margin-top: 8px;
            }
        }
    }
}

.dialog-box {
    .media_img {

        .img {
            object-fit: cover;
            width: 186px;
            height: 248px;
            border-radius: 8px;
        }
    }

    .info {
        margin-left: 20px;
        height: 248px;

        .row {
            .col {
                margin-bottom: 10px;
                font-size: 16px;
                color: #eee;

                span {
                    font-size: 16px;
                    color: #407DFF;
                }
            }
        }
    }
}

.pagination {
    .left-active {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("@/assets/prev-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
    }

    .left-disabled {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("@/assets/prev-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
    }

    .right-active {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/assets/next-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
    }

    .right-disabled {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/assets/next-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
    }

    .page {
        display: flex;
        justify-content: center;
        overflow: hidden;

        .sui-pagination {
            margin: 18px 0;

            ul {
                margin-left: 0;
                margin-bottom: 0;

                li {
                    line-height: 18px;
                    display: inline-block;

                    a {
                        display: inline-block;
                        width: 28px;
                        margin: 0 14px;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        font-size: 18px;
                        color: #eee;
                        cursor: pointer;
                    }

                    &.active {
                        a {
                            color: #fff;
                            cursor: default;
                            font-weight: 700;
                            border-radius: 50%;
                            background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%), #D9D9D9;
                        }
                    }

                    &.prev {
                        .left-active {
                            display: block !important;
                        }

                        .left-disabled {
                            display: none !important;
                        }

                        a {
                            margin-left: 0px;
                            background-color: #fafafa;
                        }
                    }

                    &.disabled {
                        .left-active {
                            display: none !important;
                        }

                        .left-disabled {
                            display: block !important;
                        }

                        .right-active {
                            display: none !important;
                        }

                        .right-disabled {
                            display: block !important;
                        }

                        a {
                            color: #999;
                            cursor: default;
                        }
                    }

                    &.dotted {
                        span {
                            width: 50px;
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                            font-size: 18px;
                            color: rgba(255, 255, 255, 0.5);
                        }
                    }

                    &.next {
                        a {}

                        .right-active {
                            display: block !important;
                        }

                        .right-disabled {
                            display: none !important;
                        }
                    }

                    &.disabled {
                        .right-active {
                            display: none !important;
                        }

                        .right-disabled {
                            display: block !important;
                        }
                    }
                }
            }

            div {
                color: #333;
                font-size: 14px;
                float: left;
                width: 80px;
            }
        }
    }
}

.Reverse {
    .search_box .item {
        margin-right: 0;
    }

    .item .tag_title {
        text-align: left;
    }

    .img {
        transform: rotate(180deg);
    }

    .el-tag {
        float: right;
    }

    .posi {
        padding-left: 0 !important;
        padding-right: 14px;
    }

    .info {
        margin-left: 0;
        margin-right: 20px;
    }

    .button-porter1 {
        margin-left: 10px;
    }
}

@media (min-width: 1024px) {}

// 宽度小于1023px
@media (max-width: 1023px) {


    .success-box {
        padding: 20px 0;

        .success-list {
            flex-wrap: wrap;

            .item {
                flex: 0 0 auto;
                width: 50%;
                padding-top: 20px;
                padding-bottom: 0;

                .download-content {
                    border-radius: 6px;
                    overflow: hidden;
                    position: relative;
                    min-height: inherit;

                    .download-top {
                        padding: 6px 8px;
                        gap: 8px;

                        .left {
                            .img {
                                width: 34px;
                                height: 34px;
                                margin-right: 10px;
                                border-radius: 50%;
                            }

                            .uname {
                                font-size: 14px;
                                color: #1d212c;
                                font-weight: 700;
                            }
                        }

                        .right {
                            .photo {
                                width: 22px;
                                height: 22px;
                                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                            }

                            .video {
                                width: 22px;
                                height: 22px;
                                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                            }
                        }
                    }

                    .media-box {
                        position: relative;
                        width: 100%;
                        // padding-top: 100%;
                        height: 240px;

                        .img {
                            max-width: 100%;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            -o-object-fit: cover;
                            object-fit: cover;
                        }

                        .download-bottom {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-end;
                            align-items: center;
                            padding: 18px 10px 10px 10px;
                            gap: 4px;

                            a {
                                width: 100%;
                                height: 100%;
                            }

                            .button {
                                background-color: #433aff;
                                border-radius: 6px;
                                color: #fff;
                                width: 100%;
                                padding: 11px;
                                font-size: 16px;
                                font-weight: 700;

                                .downloadImg {
                                    margin-right: 10px;
                                    width: 22px;
                                    height: 22px;
                                    /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                                    background-size: 22px 22px;
                                    background-repeat: no-repeat;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.APPSHOW {
    display: none;
}

@media (max-width: 992px) {
    .success-box {
        padding: 0px 0;
        padding-bottom: 20px;

        .success-list {
            flex-wrap: wrap;

            .item {
                flex: 0 0 auto;
                width: 33%;
                padding: 6px;
                padding-top: 20px;
                padding-bottom: 0;
                border-radius: 8px;
                overflow: hidden;

                .download-content {
                    border-radius: 6px;
                    min-height: inherit;
                    position: relative;

                    .posi {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        height: 32px;
                        line-height: 32px;
                        padding-left: 10px;
                        background: linear-gradient(270deg, rgba(1, 194, 255, 0.9) 0%, rgba(7, 76, 255, 0.9) 100%);
                        border-radius: 0px 0px 5px 5px;
                        color: #fff;
                        font-size: 12px;
                    }



                    .media-box {
                        position: relative;
                        width: 100%;
                        padding-top: 100%;

                        .img {
                            max-width: 100%;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            -o-object-fit: cover;
                            object-fit: cover;
                            border-radius: 10px;
                        }

                        .download-bottom {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-end;
                            align-items: center;
                            padding: 18px 10px 10px 10px;
                            gap: 4px;

                            a {
                                width: 100%;
                                height: 100%;
                            }

                            .button {
                                background-color: #433aff;
                                border-radius: 6px;
                                color: #fff;
                                width: 100%;
                                padding: 11px;
                                font-size: 16px;
                                font-weight: 700;

                                .downloadImg {
                                    margin-right: 10px;
                                    width: 22px;
                                    height: 22px;
                                    /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                                    background-size: 22px 22px;
                                    background-repeat: no-repeat;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .Reverse {
        .search_box .item {
                margin-right: 0;
            }
        .item .tag_title {
            text-align: left;
        }

        .img {
            transform: rotate(180deg);
        }

        .el-tag {
            float: right;
        }

        .posi {
            padding-left: 0 !important;
            padding-right: 14px;
        }

        .info {
            margin-left: 0;
            margin-right: 20px;
        }

        .button-porter1 {
            margin-left: 10px;
        }
    }
}

// 宽度小于768px
@media (max-width: 768px) {
    .PCSHOW {
        display: none !important;
    }

    ::v-deep .porter-dialogLogin {
        .el-dialog__header {
            padding: 20px;
        }
    }

    ::v-deep .porter-dialog {
        border: 0 !important;
    }

    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-dialog__header {
        padding: 20px;
    }

    ::v-deep .el-tag {
        margin-left: 8px;
        border: 0;
        background-color: #344264;
        font-size: 12px;
    }

    .loginbtns {
        .button-text {
            margin-left: 0px;
            display: block;
        }
    }

    .APPSHOW {
        display: block;
    }

    .container {
        padding: 0 14px;
    }

    .page_content {}

    .page_top {
        display: flex;
        flex-direction: column;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .bottom {
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .search_box {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        /* 确保宽度不超过页面 */
        box-sizing: border-box;

        /* 包含内边距和边框 */
        .item {
            display: flex;
            /* Aligns children horizontally */
            align-items: flex-start;
            /* Wraps children within the .item if necessary */
            margin-right: 20px;
            /* Add gap between items */
            width: 100%;

            .tag_title {
                color: #eee;
                font-family: Arial-Bold;
                /* font-weight: bold; */
                font-size: 14px;
                width: 62px;
                text-align: right;
                padding: 6px;
                margin-right: 0;
            }

            .content {
                display: flex;
                flex-wrap: nowrap;
                width: 100%;
                overflow-x: auto;
            }

            .content::-webkit-scrollbar {
                display: none;
                /* 适用于 WebKit 浏览器 */
            }

            .tag_all,
            .tag {
                height: 30px;
                border-radius: 5px;
                margin-right: 12px;
                line-height: 30px;
                padding: 0 12px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                color: #7F90BC;
                font-size: 13px;
                margin-bottom: 16px;
            }

            .img {
                width: 12px;
                height: 12px;
                margin-right: 10px;
            }

            .change {
                color: #fff;
                background: #407DFF;
                border: 0;
            }
        }
    }

    .success-box {
        padding: 0px 0;
        padding-bottom: 20px;

        .success-list {
            flex-wrap: wrap;

            .item {
                flex: 0 0 auto;
                width: 33%;
                padding: 6px;
                padding-top: 20px;
                padding-bottom: 0;
                border-radius: 8px;
                overflow: hidden;

                .download-content {
                    border-radius: 6px;
                    min-height: inherit;
                    position: relative;

                    .posi {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        height: 32px;
                        line-height: 32px;
                        padding-left: 10px;
                        background: linear-gradient(270deg, rgba(1, 194, 255, 0.9) 0%, rgba(7, 76, 255, 0.9) 100%);
                        border-radius: 0px 0px 5px 5px;
                        color: #fff;
                        font-size: 12px;
                    }



                    .media-box {
                        position: relative;
                        width: 100%;
                        // padding-top: 100%;
                        height: 144px;

                        .img {
                            max-width: 100%;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            -o-object-fit: cover;
                            object-fit: cover;
                            border-radius: 10px;
                        }

                        .download-bottom {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-end;
                            align-items: center;
                            padding: 18px 10px 10px 10px;
                            gap: 4px;

                            a {
                                width: 100%;
                                height: 100%;
                            }

                            .button {
                                background-color: #433aff;
                                border-radius: 6px;
                                color: #fff;
                                width: 100%;
                                padding: 11px;
                                font-size: 16px;
                                font-weight: 700;

                                .downloadImg {
                                    margin-right: 10px;
                                    width: 22px;
                                    height: 22px;
                                    /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                                    background-size: 22px 22px;
                                    background-repeat: no-repeat;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .pagination {
        .left-active {
            margin-right: 20px;
            width: 26px !important;
            height: 26px !important;
            background-image: url("@/assets/prev-active.webp");
            background-size: 26px 26px;
            background-repeat: no-repeat;
        }

        .left-disabled {
            margin-right: 20px;
            width: 26px !important;
            height: 26px !important;
            background-image: url("@/assets/prev-disabled.webp");
            background-size: 26px 26px;
            background-repeat: no-repeat;
        }

        .right-active {
            margin-left: 20px;

            width: 26px !important;
            height: 26px !important;
            background-image: url("@/assets/next-active.webp");
            background-size: 26px 26px;
            background-repeat: no-repeat;
        }

        .right-disabled {
            margin-left: 20px;

            width: 26px !important;
            height: 26px !important;
            background-image: url("@/assets/next-disabled.webp");
            background-size: 26px 26px;
            background-repeat: no-repeat;
        }

        .page {
            display: flex;
            justify-content: center;
            overflow: hidden;

            .sui-pagination {
                margin: 18px 0;

                ul {
                    margin-left: 0;
                    margin-bottom: 0;

                    li {
                        line-height: 18px;
                        display: inline-block;

                        a {
                            display: inline-block;
                            width: 28px;
                            margin: 0 14px;
                            height: 28px;
                            line-height: 28px;
                            text-align: center;
                            font-size: 16px;
                            color: #414F71;
                            cursor: pointer;
                        }

                        &.active {
                            a {
                                color: #407DFF;
                                cursor: default;
                                font-weight: 700;
                                border-radius: 50%;
                                background: transparent !important;
                            }
                        }

                        &.prev {
                            .left-active {
                                display: block !important;
                            }

                            .left-disabled {
                                display: none !important;
                            }

                            a {
                                margin-left: 0px;
                                background-color: #fafafa;
                            }
                        }

                        &.disabled {
                            .left-active {
                                display: none !important;
                            }

                            .left-disabled {
                                display: block !important;
                            }

                            .right-active {
                                display: none !important;
                            }

                            .right-disabled {
                                display: block !important;
                            }

                            a {
                                color: #999;
                                cursor: default;
                            }
                        }

                        &.dotted {
                            span {
                                width: 50px;
                                height: 30px;
                                line-height: 30px;
                                text-align: center;
                                font-size: 18px;
                                color: rgba(255, 255, 255, 0.5);
                            }
                        }

                        &.next {
                            a {}

                            .right-active {
                                display: block !important;
                            }

                            .right-disabled {
                                display: none !important;
                            }
                        }

                        &.disabled {
                            .right-active {
                                display: none !important;
                            }

                            .right-disabled {
                                display: block !important;
                            }
                        }
                    }
                }

                div {
                    color: #333;
                    font-size: 14px;
                    float: left;
                    width: 80px;
                }
            }
        }
    }

    footer {
        background-color: #01020F;

        .footer-content {
            padding: 50px 0 30px;

            .row {
                display: flex;
                flex-wrap: wrap;

                .col-12 {
                    flex: 0 0 auto;
                    width: 100%;
                    margin-bottom: 10px;

                    .list-unstyled {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .imgbox {
                            width: 48%;
                        }

                        .img {
                            width: 100%;
                            height: auto;
                        }
                    }
                }

                .col-6 {
                    flex: 0 0 auto;
                    width: 50%;
                }

                .list-unstyled {
                    margin-top: 20px;
                    list-style: none;
                    color: #8C8D9B;
                    font-size: 14px;

                    li {
                        margin-bottom: 20px;
                    }
                }
            }

            .copyright {
                margin-top: 40px;

                b {
                    font-size: 14px !important;
                }

                div {
                    margin-top: 8px;
                    font-size: 14px !important;
                }
            }
        }
    }

    .dialog-box {
        display: flex;

        .media_img {
            .img {
                width: 120px;
                height: 160px;
                border-radius: 8px;
            }
        }

        .info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 160px;
            margin-left: 15px;

            .row {
                .col {
                    margin-bottom: 10px;
                    font-size: 14px;
                    color: #eee;
                }
            }
        }

        .btns {
            display: flex;
            align-content: center;
            justify-content: space-around;
        }
    }

    .app-button-porter {
        width: 100%;
        margin-top: 14px;
    }

    .app-porter-play {
        margin-top: 14px;
        width: 100%;
        margin-left: 0;
    }

    .Reverse {
        .search_box .item {
            margin-right: 0;
        }

        .search_box .item .tag_title {
            text-align: left !important;
        }

        .img {
            transform: rotate(180deg);
        }

        .el-tag {
            float: right;
        }

        .posi {
            padding-left: 0 !important;
            padding-right: 14px;
        }

        .info {
            margin-left: 0;
            margin-right: 20px;
        }

        .button-porter1 {
            margin-left: 10px;
        }
    }
}

.download-footer {
    margin-top: 30px;

    .btn-app {
        padding: 11px;
        background-color: #dd34ab;
        border-radius: 6px 6px 6px 6px;
        width: 100%;
    }

    .gohome {
        background-color: #1d212c;

        margin-top: 14px;
        padding: 11px;
        border-radius: 6px 6px 6px 6px;
        width: 100%;

        .refresh {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
            background-size: 16px 16px;
            background-repeat: no-repeat;
        }
    }


}
</style>